<template>
  <div><h1>树形结构演示</h1>
    <el-tree :props="config" :data="treeData" default-expand-all>
      <!-- 每个节点都要重复使用的模板 -->
      <template v-slot="scope">
        部门名称: {{ scope.data.name }} 负责人: {{ scope.data.manager }}
      </template>
    </el-tree>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 树形数据演示
      // 一个数组, 其中每个元素都是一个节点, label代表节点名, children代表子节点
      treeData: [
        { name: '总裁办', manager: '小王' },
        { name: '人事', manager: '小明' },
        { name: '技术部', manager: '小红',
          children: [{ name: '前端开发' }, { name: '后端开发' }] },
        { name: '市场', manager: '张三' }
      ],
      // 以上的数据, 是我们写死,
      // 都是一般项目中,都是后端请求接口提供,
      // 有可能字段跟el-tree要求的不一致(名字label, 子元素children),
      // 可以通过配置一个指定对应关系的对象给树形设置
      config: {
        label: 'name'
      }
    }
  }

}
</script>

<style>

</style>
